<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
    window.onload = function () {
        new Vue({
            el: '#app',
            data: {
                text: '大家好，我是第一个vue',
                list: ['小红', '小明', '小智', '小刚'],
                listObject: { ming: { name: 'ming', age: 10, }, hong: { name: 'hong', age: 20, }, },
                count: 1,
                name: '天气',
                fruit: {
                    apple: true,
                    banana: false,
                }

            },
            methods: {
                add: function () {
                    this.count += 1
                },
                login: function () {
                    console.log(this.name)
                },
            }
        })
    }
</script>

<body>
    <div id='app'>
        <p v-text="text"></p>
        <div v-for="(item,index) in list">{{index}}{{item}}</div>
        <br>
        <div v-for="(obj,key,index) in listObject">{{index}}{{obj.name}}</div>
        <br>
        <p>数字的值为: {{count}}</p>
        <button v-on:click="add">加</button>
        <input v-model="name" v-on:keyup.enter="login">
        <h2>选择水果</h2>
        <label for="apple">苹果</label>
        <input type="checkbox" v-model='fruit.apple' value="apple">
        <label for="banana">香蕉</label>
        <input type="checkbox" v-model="fruit.banana" value="banana">
        <br>
        {{fruit}}
    </div>
</body>

</html>